<template>
  <div>
    <!-- 第一行 -->
    <div v-if="detailFlag">
      <el-row>
        <el-col :span="3" tag="span">
          入库单详情页 <el-divider direction="vertical"></el-divider>
        </el-col>
        <el-col :span="1.5" :offset="13">
          <el-button @click="pre">上一页</el-button>
        </el-col>
        <el-col :span="1.5">
          <el-button @click="next">下一页</el-button>
        </el-col>

        <el-col :span="1.5" >
          <el-button @click="closeDetail">关闭</el-button>
        </el-col>
      </el-row>
<!-- 显示详细信息 -->
      <el-row>基本信息 <el-divider direction="vertical"></el-divider></el-row>
      <el-divider></el-divider>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
          <span class="detail_span">入库编号:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.rkNo" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span class="detail_span">商品编号:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.goodsid" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span class="detail_span">客户:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.custom" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <!-- <el-row :gutter="20">
        <el-col :span="2" :offset="1">
          <span class="detail_span">商品种类:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.category" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
          <span class="detail_span">入库来源:</span>
        </el-col>
        <el-col :span="4" tag="span">
          <el-input v-model="rowData.rkType" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">状态:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.status" :disabled="true" ></el-input>
        </el-col>
      </el-row> -->
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">产品名字:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.name" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">产品模型:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.productModel" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">成色:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.percenttage" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">区域:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.location" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">仓库:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.repositoryNo" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">类型:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.type" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">条码:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.barCode" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">重量:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.weight" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">数量:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.nums" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">加工费:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.processingFee" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">提单人:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.makePerson" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">提单时间:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.makeTime" :disabled="true"></el-input>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="2" :offset="1">
            <span class="detail_span">审核人:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.verfyPerson" :disabled="true"></el-input>
        </el-col>
        <el-col :span="2" :offset="1">
            <span class="detail_span">审核时间:</span>
          </el-col>
          <el-col :span="4" tag="span">
          <el-input v-model="rowData.verifyTime" :disabled="true"></el-input>
        </el-col>
        
      </el-row>




      <el-divider></el-divider>
    </div>
    


<!-- 查询条件 -->
    
    <el-row>
      <el-col :span="4" :offset="10">
        <el-radio-group v-model="radio" @change="radioChange">
          <el-radio-button label="全部"></el-radio-button>
          <el-radio-button label="单品"></el-radio-button>
          <el-radio-button label="通品"></el-radio-button>
        </el-radio-group>
      </el-col>
      
      
      <el-col :span="4" :offset="1">
        <el-input v-model="input" placeholder="请输入入库单号"></el-input>  
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="search" icon="el-icon-search">搜索</el-button>
        
      </el-col>
      <el-col :span="1.5" >
        <el-button circle icon="el-icon-refresh" @click="refresh"></el-button>
      </el-col>
    </el-row><br>










<!-- 表格 -->
  <el-table
    :key="refreshKey"
    :data="tableData" 
    ref="singleTable"
    highlight-current-row
    
    @current-change="handleCurrentChange"
    @row-click="rowClick"
    :row-class-name="rowClassName"
    style="width: 100%">
    <el-table-column
      type="index"
      header-align="center"
      align="center"
      width="80">
    </el-table-column>

      <el-table-column
        header-align="center"
        align="center"
        prop="no"
        label="序号"
        width="180">
        
      </el-table-column>
  
    
    <el-table-column
      header-align="center"
      align="center"
      prop="goodsid"
      label="商品编号"
      width="220">
      <template slot-scope="scope">
        <div @click.stop="goodsMessage(scope.row.goodsid)">{{scope.row.goodsid}}</div>
      </template>
    </el-table-column>

    <el-table-column
      header-align="center"
      align="center"
      prop="status"
      label="状态"
      :formatter="statusFormatter"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="name"
      label="名字"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="custom"
      label="客户"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="repositoryNo"
      label="仓库"
      width="160">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="percenttage"
      label="成色"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="type"
      label="类型"
      width="120">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="weight"
      label="重量"
      width="80">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="nums"
      label="数量"
      width="80">
    </el-table-column>
    <el-table-column
      header-align="center"
      align="center"
      prop="processingFee"
      label="加工费"
      width="80">
    </el-table-column>
    
  </el-table>
  <!-- 分页 -->

  <el-pagination
    @size-change="handleSizeChangeA"
    @current-change="handleCurrentChangeA"
    :current-page="1"
    :page-sizes="[10, 20, 30]"
    :page-size="sizeEveryPage"
    layout="total, sizes, prev, pager, next, jumper"
    :total="total">
  </el-pagination>

  <!-- 抽屉显示流水 -->

    <el-drawer
      title="库存流水!"
      :visible.sync="drawer"
      :with-header="false"
      direction="rtl"
      size="40%">
      <el-row>
        <el-col :offset="8">
          <div class="allFlow">
            库存流水记录
          </div>
          
        </el-col>
      </el-row>
      <br><br>
      <el-table :data="flow">
          <el-table-column property="time" label="时间" width="250" header-align="center" align="center"></el-table-column>
          <el-table-column property="type" label="方式" width="100" header-align="center" align="center"></el-table-column>
          <el-table-column property="operator" label="操作员" width="100" header-align="center" align="center"></el-table-column>
          <el-table-column property="weight" label="重量" width="100" header-align="center" align="center"></el-table-column>
          <el-table-column property="nums" label="数量" width="100" header-align="center" align="center"></el-table-column>
        </el-table>
        <el-row><br><br></el-row>
        <!-- <div >
          <el-pagination
            layout="prev, pager, next"
            :total="50">
          </el-pagination>
        </div> -->
        <el-row>
          <el-col :offset="8">
            <el-button-group>
              <el-button type="primary" icon="el-icon-arrow-left" @click="flowPre">上一页</el-button>
                <el-button type="primary" @click="flowNext">下一页<i class="el-icon-arrow-right el-icon--right"></i></el-button>
            </el-button-group>
          </el-col>
        </el-row>
        
    </el-drawer>

  
  </div>

</template>

<script>
export default {
  data() {
    return {
      
      radio:"全部",
      refreshKey:0,
      input:"",
      flowPage:1,
      totalFlowData:0,
      tableData: [],
      sizeEveryPage:10,
      pageNum:1,
      total:null,
      rowData:null,
      detailFlag:false,
      index:"",
      rkNo:"",
      drawer: false,
      goodsid:"",
      flow:[]
    }
  },

  methods:{
    //流水前一页
    flowPre(){
      if(this.flowPage == '1'){
        this.$message({
          type:"warning",
          message:'这已经第一页了~'
        });
        return;
      }
      this.flowPage--;
      this.flowSelectByPage();
    },
    //流水下一页
    flowNext(){
      let i = this.totalFlowData / 10;
      console.log(this.flowPage);
      // if(i == 0){
      //   if(this.flowPage == i){
      //     this.$message({
      //       type:"warning",
      //       message:'这已经是最后一页了~'
      //     });
      //     return;
      //   }
      // }else{
        if(this.flowPage > i ){
          this.$message({
            type:"warning",
            message:'这已经是最后一页了~'
          });
          return;
        }
      // }
      
      this.flowPage++;
      this.flowSelectByPage();
    },
    goodsMessage(goodsid){
      //console.log(row.rkNo);
      
      console.log(goodsid);
     
      // this.axios({
      //   method:"get",
      //   url:this.baseUrl+"rkTable/findByRkNo",
      //   params:{
      //     rkNo:this.rkNo
      //   }
      // }).then(res=>{
      //   //this.dataFormat(res.data.data);
      //   console.log(res.data.data);
      //   this.rowData = res.data.data[0];
      //   this.detailFlag = true;
      // })
    },

    //按单品通品查询
    radioChange(){
     // console.log(this.radio);
      this.selectByPage();
    },

    //详情上一页
    pre(){
      if(this.index === 0){
        this.$message.error("已经是第一页了~");
        return;
      }
      this.index = this.index-1;
      this.rowData = this.tableData[this.index];

      //高亮显示用
      this.$refs.singleTable.setCurrentRow(this.tableData[this.index]);
    },
    //详情下一页
    next(){
      if(this.index === this.sizeEveryPage-1){
        this.$message.error("已经是最后一页了~");
        return;
      }
      this.index = this.index+1;
      this.rowData = this.tableData[this.index];
      this.$refs.singleTable.setCurrentRow(this.tableData[this.index]);
    },
    //将行索引放进row
    rowClassName({row,rowIndex}){
      row.index = rowIndex;
    },
    //关闭详细信息
    closeDetail(){
      console.log(this.detailFlag);
      this.detailFlag = false;
    },
    //显示点击行的详细信息
    rowClick(){
      // this.rowData = this.tableData[row.index];
      // this.index = row.index;
      // this.detailFlag = true;
      //console.log("点击行");
      this.flowSelectByPage();
     

    },
    //刷新
    refresh(){
      this.input = "";
      this.selectByPage();
    },
    search(){
      this.detailFlag = false;
      //按输入入库编号查
      //alert(this.date);
      this.axios({
        method:"get",
        url:this.baseUrl+"repository/findByNo",
        params:{
          no:this.input
        }
      }).then(res=>{
        //this.dataFormat(res.data.data);
        console.log(res.data.data);
        this.tableData = res.data.data;
        this.total = null;
      })
    },
    searchDate(){
      
      //按时间查询
      this.selectByPage();
    },

    //分页
    //按每页显示条数查
    handleSizeChangeA(val) {
      
      this.sizeEveryPage = val;
      //console.log(this.sizeEveryPage);
      this.selectByPage();
    },
    //按页码查
    handleCurrentChangeA(val) {
      
      this.pageNum = val;
      //console.log(this.pageNum);
      this.selectByPage();
    },

    //转换信息的显示
    statusFormatter(val){
      //console.log(val.status);
      if(val.nums < 20){
       return "缺货";
       //return '<span style="color:red">'+'缺货'+'</span>';
      }else{
        return '充足';
      }
    },
    
    
    handleCurrentChange(val) {
        this.rowData = val;
    },
    //流水表分页查询
    flowSelectByPage(){
      this.axios({
        method:"get",
        url:this.baseUrl+"repositoryFlow/findAllByNo",
        params:{
          flowPage:this.flowPage,
          no:this.rowData.no
        }
      }).then(res=>{
        this.flow = res.data.data.list;
        this.totalFlowData = res.data.data.total;
      })
      //console.log(this.flow.list);
      this.drawer =true;
    },
    //分页查询方法
    selectByPage(){
      this.detailFlag = false;
      this.axios({
        method:"get",
        url:this.baseUrl+"repository/findAll",
        params:{
          type:this.radio,
          page:this.pageNum,
          nums:this.sizeEveryPage
        }
      }).then(res=>{
        //this.dataFormat(res.data.data.list);
        this.tableData = res.data.data.list;
        this.total = res.data.data.total;
      })
    }

  },
  created(){
    //查询仓库表
    this.axios({
      method:'get',
      url:this.baseUrl+"repository/findAll",
      params:{
        type:"全部",
        page:1,
        nums:10
      }
    }).then(res=>{
      //let data = res.data.data.list;
      
      this.tableData = res.data.data.list;
      this.total = res.data.data.total;
      console.log(res);
    })
    //




  }
}
</script>

<style scoped>
  .allFlow{
    font-size: 25px;
    font-family: "PingFang SC";
    
  }
</style>
